<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <a-spin :spinning="spinning" tip="Loading...">
    <div>
      <zh-row :gutter="[16, 16]">
        <zh-col :xs="24" :sm="24" :md="24" :lg="12" :xl="16" :xxl="16">
          <zh-row :gutter="[16, 16]">
            <zh-col :xs="12" :sm="12" :md="12" :lg="12" :xl="8" :xxl="8">
              <a-card class="card-radius" :bordered="false" :bodyStyle="bodyStyle_pd0">
                <div class="card-mar">
                  <div class="title-size">本年业务量</div>
                  <h2 class="title-size2">{{ this.allInfo.yearAllCount }}</h2>
                  <div class="border-t1 pd-t9">
                    <span class="title-size3">当月新申请量</span>
                    <span class="title-size4">{{ this.allInfo.monAllCount }}</span>
                  </div>
                </div>

              </a-card>
            </zh-col>
            <zh-col :xs="12" :sm="12" :md="12" :lg="12" :xl="8" :xxl="8">
              <a-card class="card-radius" :bordered="false" :bodyStyle="bodyStyle_pd0">
                <div class="card-mar">
                  <div class="title-size">本年已审核</div>
                  <h2 class="title-size2">{{ this.allInfo.yearAllExam }}</h2>
                  <div class="border-t1 pd-t9">
                    <span class="title-size3">当月已审核</span>
                    <span class="title-size4">{{ this.allInfo.monAllExam }}</span>
                  </div>
                </div>
              </a-card>
            </zh-col>

            <zh-col :xs="24" :sm="24" :md="24" :lg="24" :xl="8" :xxl="8">
              <a-card class="card-radius" :bordered="false" :bodyStyle="bodyStyle_pd0">
                <div class="card-mar">
                  <div class="title-size">待审核</div>
                  <h2 class="title-size5">{{ this.allInfo.waitExam }}</h2>
                  <div>
                    <span class="title-size3">当前审核进度</span>
                    <span class="title-size4">{{ this.allInfo.progressExam }}%</span>
                    <a-progress :percent="this.allInfo.progressExam" :show-info="false"
                                strokeColor="#13C2C2"/>
                  </div>
                </div>

              </a-card>
            </zh-col>

            <zh-col :span="24">
              <a-card class="card-radius" :bordered="false"
                      :bodyStyle="bodyStyle_pd0">
                <div class="icon-div2 border-b1">
                  <span class="icon-div5"></span>
                  <span class="title-size6"> 常用功能</span>
                  <div class="mar-lauto" @click="chioceUse()">
                    <a-icon type="setting"/>
                  </div>
                </div>
                <a-row :gutter="16">
                  <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6" :xxl="6" class="common-fun2"
                         v-for="(item,index) in allInfo.homePageMenuVOList " :key="index">
                    <div class="icon-div3" @click="morePend(item.key)">
                      <!-- 图标等以后统一每个模块设计-->
                      <img class="mar-t14" width="38px" height="34px" :src="userIcon2[index].icon"/>
                      <div class="icon-div4"
                           :style="{'background-image':'url('+backIcon+')'}">
                        <span> {{ item.name }}</span>
                      </div>
                    </div>
                  </a-col>
                </a-row>
              </a-card>
            </zh-col>
            <zh-col :span="24">
              <a-card class="card-radius" :bordered="false"
                      :bodyStyle="bodyStyle_pd0">
                <a-row :gutter="[16, 16]">
                  <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="12">
                    <div class="icon-div border-b1">
                      <span class="icon-div5"></span>
                      <span class="title-size6"> 我的待办</span>
                      <div class="mar-lauto" @click="morePend('myPend')">
                        <a-icon type="small-dash"/>
                      </div>
                    </div>

                    <div v-for="(pend,i) in pendTableData" :key="i" class="pd-tb14-lr16"
                         :class="i===3?'':'border-b1' " @click="editRow(pend)">
                      <span class="font-size14-1">{{ pend.operationName }}</span>
                      <div class="fl-ri font-size14-2">{{ pend.applicantTime }}</div>
                    </div>

                  </a-col>
                  <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="12">
                    <div id="myChart" class="char-div"></div>
                  </a-col>
                </a-row>
              </a-card>
            </zh-col>
          </zh-row>
        </zh-col>
        <zh-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="8">
          <zh-row :gutter="[0, 16]">
            <zh-col :span="24">
              <a-card class="card-radius" :bordered="false"
                      :bodyStyle="bodyStyle_pd0" style="height: 352px">
                <div class="icon-div2 border-b1">
                  <img width="15px" height="16px" class="mar-t3-r7"
                       src="@/assets/workPlace/icon10.svg"/>
                  <span class="title-size6"> 最新消息</span>
                </div>
                <div v-for="(item,index) of messageList" :key="item.messageId" class="pd-tb14-lr16"
                     :class="index===5?'':'border-b1' ">
                  <div v-if="index<=5" @click="readMessage(item)">
                    <span class="font-size14-1">{{ item.title }}</span>
                    <div class="fl-ri font-size14-2">{{ item.sendTime }}</div>
                  </div>
                </div>
                <a-modal
                    :title="newDetails.title"
                    :visible="showNewDetailsFlag"
                    :confirm-loading="false"
                    @ok="closeNewDetails"
                    @cancel="closeNewDetails"
                    oncancel="false"
                    :footer="null"
                >
                  <div style="text-indent:2em;padding: 0px 40px 0 40px;">
                    {{ newDetails.messageContent }}
                  </div>
                  <div style="text-align: right;padding: 40px;">
                    <div>{{ newDetails.sendName }}</div>
                    <div>{{ newDetails.sendTime }}</div>
                  </div>
                </a-modal>
              </a-card>
            </zh-col>
            <zh-col :span="24">
              <a-card class="card-radius" :bordered="false"
                      :bodyStyle="bodyStyle_pd0">
                <div class="icon-div2 border-b1">
                  <span class="icon-div5"></span>
                  <span class="title-size6"> 业务量统计</span>

                </div>
                <div id="myChart2" v-resize="resize" class="char-div2"></div>
              </a-card>
            </zh-col>
          </zh-row>
        </zh-col>
        <!-- <zh-col :span="6" class="pd-l5">
             <a-card class="card-radius" :bordered="false"
                     :bodyStyle="bodyStyle_pd_t10">
                 <div class="icon-div">
                     <a-icon type="user" class="font-s24"/>
                     <span class="font-weightB font-s16 mar-l2"> 基本信息</span>
                     <div class="mar-lauto">更多
                         <a-icon type="right"/>
                     </div>
                 </div>
                 <div class="te-alcenter">
                     <a-avatar :size="80" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/>
                 </div>
                 <div class="font-s16">
                     <div v-for="(item,index) in  personInfo" :key="index" class="pd-tb10-lr30"
                          :class="index===personInfo.length-1?'':'border-b1' ">
                         {{ item.name }}
                         <div class="fl-ri"> {{ item.values }}</div>
                     </div>
                 </div>
             </a-card>
         </zh-col>-->
      </zh-row>
      <a-modal
          centered
          width="99%"
          destroyOnClose
          v-model="auditVisible"
          @cancel="mypend"
          footer=""
      >
        <CommonAudit :comData="comData" @Refresh="mypend"></CommonAudit>
      </a-modal>

      <a-modal
          title="选择常用功能"
          centered
          width="40%"
          destroyOnClose
          v-model="auditVisible2"
          :bodyStyle="{ height: '500px','overflow-y':'auto','scrollbar-width': 'thin' }"
          cancelText="关闭"
          okText="保存"
          @ok="saveEdit"
          @cancel="cancelEdit"

      >
        <!--必须要加v-if 否则异步加载数据后不会触发defaultExpandAll -->
        <a-tree
            v-if="treeData.length"
            v-model="checkedKeys"
            checkable
            :defaultExpandAll=true
            :tree-data="treeData"
            :replace-fields="replaceFields"
            @check="onCheck"
        />
        <!-- <template slot="footer">
             <a-button @click="handleCancel">提交</a-button>
         </template>-->
      </a-modal>

    </div>
  </a-spin>
</template>

<script>
import {
  getApplyingTasks,
  getCommonMenu,
  getData,
  getMonAllExam,
  getWaitExam,
  getWeekData,
  getYearAllExam
} from "@/services/system/workflowApi"
import CommonAudit from '@/pages/overview/CommonAudit'
import api, {getMenu, getUserMenu, saveUserMenu} from "@/services/system/api"
import {rootRouterId} from '@/config/default/setting.config'
import modal from 'ant-design-vue/es/modal'
import * as echarts from 'echarts'

export default {
  name: "IndexDemo",
  components: {
    CommonAudit,
  },
  data() {
    return {
      showNewDetailsFlag: false,
      newDetails: {
        title: '',
        messageContent: '',
        sendName: '',
        sendTime: ''
      },
      /* personInfo: [{name: '姓名', values: '张三'},
           {name: '手机号', values: '13612345678'},
           {name: '邮箱', values: '123456@qq.com'},
           {name: '籍贯', values: '浙江'},
           {name: '参加工作时间', values: '协拍员'},
           {name: '岗位', values: '协拍员'},

       ],*/
      backIcon: require('@/assets/workPlace/icon5.png'),
      userIcon2: [{icon: require('@/assets/workPlace/icon6.png'), name: '剧组管理'},
        {icon: require('@/assets/workPlace/icon7.png'), name: '剧组费用代录'},
        {icon: require('@/assets/workPlace/icon8.png'), name: '堪景单管理'},
        {icon: require('@/assets/workPlace/icon9.png'), name: '场景预约'}],
      bodyStyle_pd0: {
        padding: '0'
      },
      bodyStyle_pd_tb10: {
        padding: '10px 0px'
      },
      bodyStyle_pd_t10: {padding: '10px 0px 0px'},
      mychart1: '',
      mychart2: '',
      //审核页面的打开和关闭
      auditVisible: false,
      queryParam: {},//我的代办查询条件
      pendTableData: [],
      //审核相关信息
      comData: null,
      allInfo: {
        yearAllCount: '0',//本人本年业务量，最好转成这种带逗号的形式
        monAllCount: '0',//本人当月业务量
        yearAllExam: '0',//本人本年已审核
        monAllExam: '0',//本人本月已审核
        waitExam: '0',//本人总计待审核
        progressExam: 0,//本人当前审核进度  本人今年已审核除以本人今年总业务量
        weekData: [],//本周办件量，显示本周7个数字，现在周三，后面周四-周日都是0,
        data: [],//本年业务统计量，这个取他能办理业务的最高的前6个，其他剩下的合并为‘其他’,前6个按从高到低排序，按实际显示‘其他’放最后，不足6个就不要其他
        homePageMenuVOList: [],
      },
      auditVisible2: false,
      treeData: [],
      replaceFields: {//自定义树的名称
        children: 'children',
        title: 'title',
        key: 'routerId',//key
      },
      checkedKeys: [],
      chartFlag1: false,
      chartFlag2: false,
      spinning: false,
      messageList: [],//消息列表
    }
  },
  directives: {  // 使用局部注册指令的方式
    /* resize这里不能正常监听缩放按钮导致页面宽度变化，改用这个方法
         window.addEventListener("resize", () => {
         myChart.resize();
     });*/
    resize: { // 指令的名称
      bind(el, binding) { // el为绑定的元素，binding为绑定给指令的对象
        let width = '';

        function isReize() {
          const style = document.defaultView.getComputedStyle(el);
          if (width !== style.width) {
            binding.value();  // 关键
          }
          width = style.width;
        }

        el.__vueSetInterval__ = setInterval(isReize, 300);
      },
      unbind(el) {
        clearInterval(el.__vueSetInterval__);
      }
    }
  },
  created() {

  },
  mounted() {
    //有的浏览器echarts生成图在刷新页面后会冲出card,加一个这个可以避免
    this.getAllInfo();
    /*setTimeout(() => {


    })*/

  },
  methods: {
    // shu() {
    //   //url1（这个加在现有的home/homePage/query/homePageInfo里面）:进入首页默认获取常用功能列表
    //   //如果有自选记录展示自选记录，没有自选记录系统后台按账号拥有的权限（最多4个）
    //   //name是名称，key是跳转用的this.$router.push({name: 'myPend'});
    //   let userMychoice = [{key: 'myPend', name: '我的代办'},
    //     {key: 'myPend', name: '我的代办'},
    //     {key: 'myPend', name: '我的代办'},
    //     {key: 'myPend', name: '我的代办'}];
    //   //url2:点开自选获取已经选择的自选列表的routerId，没有自选记录的就返回空数组，最多4个
    //   let getMychoice = ['da8e26f070e34ef7acab0c28389915f8', 'da8e26f070e34ef7acab0c28389915f8']
    //   //url3:点击提交需要保存的自选列表的routerId，最多4个，最少1个
    //   let commitMychoice = ['da8e26f070e34ef7acab0c28389915f8', 'da8e26f070e34ef7acab0c28389915f8'];
    // },
    getAllInfo() {
      //因为设置了自定义指令，必须先生成图表，否则控制台会报错

      this.mypend();
      this.$http.post(getCommonMenu, this.queryParam).then((res) => {
        this.allInfo.homePageMenuVOList = res.result;
        //   this.allInfo.progressExam=10;
        //重载图表
        this.inde();
        this.inde2();
      });
      this.$http.post(getData, this.queryParam).then((res) => {
        this.allInfo.data = res.result;
        //   this.allInfo.progressExam=10;
        //重载图表
        this.inde();
        this.inde2();
      });
      this.$http.post(getWeekData, this.queryParam).then((res) => {
        this.allInfo.weekData = res.result;
        //   this.allInfo.progressExam=10;
        //重载图表
        this.inde();
        this.inde2();
      });
      this.$http.post(getWaitExam, this.queryParam).then((res) => {
        this.allInfo.waitExam = res.result;
        let monAllExam = parseInt(this.allInfo.monAllExam.replaceAll(",", ""));
        let yearAllExam = parseInt(this.allInfo.yearAllExam.replaceAll(",", ""));
        let waitExam = parseInt(this.allInfo.waitExam.replaceAll(",", ""));
        this.allInfo.monAllCount = (monAllExam + waitExam + "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        this.allInfo.yearAllCount = (yearAllExam + waitExam + "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        this.allInfo.progressExam = (parseInt(yearAllExam) * 100 / (yearAllExam + waitExam)).toFixed(2);
        //   this.allInfo.progressExam=10;
        //重载图表
        this.inde();
        this.inde2();
      });
      this.$http.post(getMonAllExam, this.queryParam).then((res) => {
        this.allInfo.monAllExam = res.result;
        let monAllExam = parseInt(this.allInfo.monAllExam.replaceAll(",", ""));
        let waitExam = parseInt(this.allInfo.waitExam.replaceAll(",", ""));
        this.allInfo.monAllCount = (monAllExam + waitExam + "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        //   this.allInfo.progressExam=10;
        //重载图表
        this.inde();
        this.inde2();
      });
      this.$http.post(getYearAllExam, this.queryParam).then((res) => {
        this.allInfo.yearAllExam = res.result;
        let yearAllExam = parseInt(this.allInfo.yearAllExam.replaceAll(",", ""));
        let waitExam = parseInt(this.allInfo.waitExam.replaceAll(",", ""));
        this.allInfo.yearAllCount = (yearAllExam + waitExam + "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        this.allInfo.progressExam = (parseInt(yearAllExam) * 100 / (yearAllExam + waitExam)).toFixed(2);
        //   this.allInfo.progressExam=10;
        //重载图表
        this.inde();
        this.inde2();
      });
      /*this.$http.post(gethomePageInfo, this.queryParam).then((res) => {
          this.allInfo = res.result;
          //   this.allInfo.progressExam=10;
          //重载图表
          this.inde();
          this.inde2();
          this.spinning=false;
      });*/

      /*this.allInfo={
          yearAllCount:'126,560',//本人本年业务量，最好转成这种带逗号的形式
          monAllCount:'1,000',//本人当月业务量
          yearAllExam:'8,846',//本人本年已审核
          monAllExam:'1,234',//本人本月已审核
          waitExam:'1,400',//本人总计待审核
          progressExam:70,//本人当前审核进度  本人今年已审核除以本人今年总业务量
          weekData: [82, 93, 90, 93, 120, 130, 120],//本周办件量，显示本周7个数字，现在周三，后面周四-周日都是0,
          yearData: [//本年业务统计量，这个取他能办理业务的最高的前6个，其他剩下的合并为‘其他’,前6个按从高到低排序，按实际显示‘其他’放最后，不足6个就不要其他
              {value: 700, name: '堪景单'},
              {value: 600, name: '场景预约'},
              {value: 500, name: '费用代录'},
              {value: 400, name: '补款登记'},
              {value: 300, name: '结算申请'},
              {value: 200, name: '剧组管理'},
              {value: 100, name: '其他'},
          ]

      };*/
      this.queryMessage();
    },
    mypend() {
      this.auditVisible = false;
      this.queryParam.pageSize = 4;
      this.queryParam.pageNum = 1;
      this.queryParam.property = "applicantTime";
      this.queryParam.order = "DESC";
      this.$http.post(getApplyingTasks, this.queryParam).then((res) => {
        this.pendTableData = res.result.list;
      });
    },
    editRow(row) {
      this.auditVisible = true;
      //zip打包名称
      let zipName = row.operationName + '【' + row.applicantName + '】' + row.busNo + '.zip';
      this.comData = {
        busNo: row.busNo,
        taskId: row.id,
        flowNodeId: row.flowNodeId,
        status: row.status,
        executionId: row.executionId,
        procInstId: row.procInstId,
        procDefId: row.procDefId,
        operationType: row.operationType,
        zipName: zipName
      };
    },
    morePend(name) {
      this.$router.push({name: name});
    },
    inde() {
      //	此dom为echarts图标展示dom
      let myChart = echarts.init(document.getElementById('myChart'));
      this.mychart1 = myChart;
      let option = {

        title: {
          text: '本周办件量',
          top: '16px',
          left: 'left',
          textStyle: {
            fontSize: 14,
            fontWidth: 400,

          },
        },
        grid: {
          top: '20%',
          right: '10%',
          bottom: '15%',
          left: '10%',
        },
        xAxis: {
          type: 'category',

          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],

        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {type: 'dashed'}
          }
        },
        series: [{
          data: this.allInfo.weekData,
          type: 'bar',
          color: '#1890FF',
          barWidth: 24,
        }]
      };
      myChart.clear();
      myChart.setOption(option);
      this.chartFlag1 = true;
    },
    inde2() {
      //	此dom为echarts图标展示dom
      let myChart = echarts.init(document.getElementById('myChart2'));
      this.mychart2 = myChart;
      let option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          left: 'left',
          orient: 'vertical',

        },
        series: [
          {
            name: '业务量统计',
            type: 'pie',
            left: 60,
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: true,
              position: 'center',
              color: '#4c4a4a',
              formatter: '{total|' + this.allInfo.yearAllExam + '}' + '\n\r' + '{active|总计业务量}',
              rich: {
                total: {
                  color: '#6c7a89',
                  fontSize: 20
                },
                active: {
                  color: '#454c5c',
                  fontSize: 12,
                  lineHeight: 18
                },
              }
            },
            labelLine: {
              show: false
            },
            data: this.allInfo.data
          }
        ]
      };
      myChart.clear();
      myChart.setOption(option)
      this.chartFlag2 = true;
    },
    resize() {
      if (this.chartFlag1) {
        this.mychart1.resize();
      }
      if (this.chartFlag2) {
        this.mychart2.resize();
      }

    },
    chioceUse() {
      //获取个人菜单树
      let params = {}
      params.routerId = rootRouterId
      //获取整个权限
      let p1 = () => {
        this.$http.post(getMenu, params).then((response) => {
          this.treeData = this.getTree(response.result);

        });
      }
      //获取个人自选
      let p2 = () => {
        //this.checkedKeys = ['da8e26f070e34ef7acab0c28389915f8'];//myPend
        this.$http.post(getUserMenu, params).then((response) => {
          this.checkedKeys = response.result;

        });
      }
      //按顺序执行post
      Promise.all([p1(), p2()]).then((result) => {
        this.auditVisible2 = true;
      }).catch((error) => {
        modal.info({title: '错误提示', content: error})
      })

    },
    getTree(treeData) {
      //将非子级目录的树菜单前面checkbox去除
      let tree = treeData
      tree.forEach(ele => {
        if (ele.children && ele.children.length > 0) {
          ele.checkable = false;
          this.getTree(ele.children)
        }
      })
      return tree;
    },
    onCheck(checkedKeys) {
      if (checkedKeys.length > 4) {
        checkedKeys.pop();
        modal.info({title: '错误提示', content: '常用功能最多选4个！'})
      }
      this.checkedKeys = checkedKeys;
    },
    saveEdit() {
      if (this.checkedKeys.length > 4 || this.checkedKeys.length < 1) {
        modal.info({title: '错误提示', content: '常用功能最少1个最多选4个！'});
        return;
      }
      let params = {}
      params.routerIds = this.checkedKeys;
      this.$http.post(saveUserMenu, params).then((response) => {
        let result = response.code;
        if (result == 0) {
          modal.info({title: '成功提示', content: '修改成功！'})
          this.getAllInfo();
          this.auditVisible2 = false;
        }


      });
    },
    cancelEdit() {
      this.auditVisible2 = false;
    },
    queryMessage() {
      let param = {};
      this.$http.post(api.queryMessageList, param).then((res) => {
        this.messageList = res.result.list;
      }).catch(() => {
        modal.error({title: '提示', content: '获取消息信息失败'});
      })
    },
    readMessage(item) {
      if (item.readTime) {
        this.showNewDetails(item);
      } else {
        let params = {};
        params.userMessageId = item.userMessageId;
        this.$http.post(api.readUserMessage, params).then(res => {
          this.showNewDetails(item);
        }).catch(error => {
          this.showNewDetails(item);
        });
      }
    },
    showNewDetails(item) {
      this.newDetails = item;
      this.showNewDetailsFlag = true;
    },
    closeNewDetails() {
      this.showNewDetailsFlag = false;
      this.newDetails = {};
    },
  }
}
</script>

<style lang="less" scoped>

.mar-lauto {
  margin-left: auto;
  cursor: pointer;
}

.mar-tb16 {
  margin: 16px 0;
}

.mar-t14 {
  margin-top: 14px;
}

.mar-t16 {
  margin-top: 16px;
}

.mar-t3-r7 {
  margin-top: 3px;
  margin-right: 7px;
}

.pd-r16 {
  padding-right: 16px;
}

.pd-r12 {
  padding-right: 12px;
}

.pd-8 {
  padding: 8px;
}

.pd-tb14-lr16 {
  padding: 14px 16px
}

.border-t1 {
  border-top: 1px #E8E8E8 solid
}

.border-b1 {
  border-bottom: 1px #E8E8E8 solid
}

.font-size14-1 {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
  font-weight: 400;
}

.font-size14-2 {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.45);
  font-weight: 400;
}

.card-radius {
  width: 100%;
  /* border-radius: 8px;*/
}

.icon-div {
  padding: 16px 16px 10px;
  display: flex;
  align-items: center;
}

.icon-div2 {
  padding: 11px 16px 10px;
  display: flex;
  align-items: center;
}

.icon-div3 {
  width: 110px;
  height: 93px;
  border: 1px solid #E5E5E5;
  border-radius: 6px;
  margin: 0 auto;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
}

.icon-div3:hover {
  border: 1px solid #4E9BFA;
  color: #3B8AF3;
  font-weight: 500;
}

.icon-div4 {
  text-align: center;
  width: 100%;
  height: 43px;
  background-size: cover;
  padding-top: 16px
}

.icon-div5 {
  width: 1px;
  margin-top: 4px;
  height: 15px;
  border-left: 2px solid #005DD5;
  border-right: 1px solid #005DD5;
  margin-right: 10px
}

.common-fun {
  text-align: center;
  padding: 24px 0 21px;
}

.common-fun2 {
  text-align: center;
  padding: 19px 0 18px;
}

.fl-ri {
  float: right;
}

.char-div {
  width: 100%;
  height: 249px;
}

.char-div2 {
  width: 100%;
  height: 203px;
}

.title-size {
  height: 22px;
  line-height: 22px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.45);
}

.title-size2 {
  height: 38px;
  line-height: 38px;
  font-size: 30px;
  font-weight: 400;
  margin-top: 4px;
  margin-bottom: 20px;
}

.title-size3 {
  height: 22px;
  line-height: 22px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
  margin-right: 8px;
}

.title-size4 {
  height: 22px;
  line-height: 22px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.85);
}

.title-size5 {
  height: 38px;
  line-height: 38px;
  font-size: 30px;
  font-weight: 400;
  margin-top: 4px;
  margin-bottom: 9px;
}

.title-size6 {
  height: 24px;
  line-height: 24px;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 600;
}

.title-size7 {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);

}

.card-mar {
  margin: 20px 24px 16px;
}

.pd-t9 {
  padding-top: 9px;
}

</style>
